<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>清除浮动</title>
    <style>
      .clearfix::before,
      .clearfix::after {
        content: '';
        display: table;
      }
      .clearfix::after {
        clear: both;
      }
      .clearfix {
        *zoom: 1;
      }

      .left-box {
        float: left;
        width: 200px;
        height: 200px;
        background-color: palegreen;
      }

      .right-box {
        float: right;
        width: 200px;
        height: 200px;
        background-color: paleturquoise;
      }

      .main-box {
        height: 300px;
        background-color: palevioletred;

        /*
          清除浮动
          方式一: (推荐)
            隔墙法,在需要清除浮动的元素之前添加一个div元素,样式属性使用clear:both
            缺点: 页面中多出一个元素,影响页面的架构
            优化: 把clear:both写在需要清除浮动的元素上

          方式二: (不推荐) 父级添加 overflow 属性

          方式三: (不推荐)  父级添加单伪元素

          方式四: (推荐)    父级添加双伪元素
            .clearfix::before,.clearfix::after {
                content:"";
                display:table;
            }
            .clearfix::after {
                clear:both;
            }
            .clearfix {
                *zoom:1;
            }  
        */
        /* clear: both; */
      }
    </style>
  </head>
  <body>
    <div class="clearfix">
      <div class="left-box"></div>
      <div class="right-box"></div>
    </div>
    <div class="main-box"></div>
  </body>
</html>
